<!-- 艺人-合伙人 -->
<template>
	<view class="join-box">
		<image :src="images.partnerBgNew"></image>
		<view class="main-box">
			<view class="form-box">
				<text>加盟信息</text>
				<view class="form-item">
					<text>合伙人</text>
					<uni-easyinput v-model.trim="formData.name" :inputBorder="false" placeholder="请输入合伙人姓名"
						placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}"></uni-easyinput>
				</view>
				<view class="form-item">
					<text>手机号</text>
					<uni-easyinput v-model.trim="formData.phone" type="number" :maxlength=11 :inputBorder="false"
						placeholder="请输入手机号" placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}"></uni-easyinput>
				</view>
				<view class="form-item">
					<text>所在区域</text>
					<view>
						
						<uni-easyinput type="input" :maxlength="10" :inputBorder="false" placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}" :trim="true" v-model="formData.cityName" placeholder="请输入所在区域"
							@change="change">
						</uni-easyinput>

					</view>
				</view>
			</view>
			<view class="form-btn" @tap="handleSubmit()">立即加入</view>
		</view>
	</view>
</template>

<script>
// 引入图片
import imgs from '@/static/images/index.js'

	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		postPartnerUpdate,
	} from '@/api/user.js'
	import validation from '@/utils/test'
	export default {
		name: 'join',
		computed: {
			...mapGetters(['userInfo', 'locationInfo', 'AreaList', 'isLogin']),
		},
		data() {
			return {
				images: {}, // 图片组

				formData: {
					phone: '',
					name: '',
					cityName: '',
					userId: '',
				}
			};
		},
		onLoad() {
			this.images = {...imgs}

			const {
				phone = ''
			} = this.userInfo
			const {
				cityCode = ''
			} = this.locationInfo
			Object.assign(this.formData, {
				phone,
			})
		},
		methods: {
			bindPickerChange(e) {
				this.formData.cityIndex = e.detail.value
				this.formData.cityCode = this.AreaList[e.detail.value].code
			},
			
			/**
			 * 修改所在区域
			 */
			change(e){
			},
			
			async handleSubmit() {
				if (!this.isLogin) {
					uni.switchTab({
						url: '/pages/my/index'
					})
					return
				}
				
				this.formData.userId = this.userInfo.id
				
				// 校验规则
				const {
					phone,
					name,
					cityName
				} = this.formData
				
				if (!name){
					this.$public.showText('请输入艺名')
					return
				}  else if (!phone) {
					this.$public.showText('请输入手机号')
					return
				}
				else if (!validation.mobile(phone)){
					this.$public.showText("请输入正确的手机号码")
					return
				} 
				else if (!cityName){
					this.$public.showText('请输入所在区域')
					return
				}
		
				const res = await postPartnerUpdate(this.formData)
				
				if(res.code !== 200){
					return this.$public.showText(res.msg || '请求失败')
				}
				
				this.$public.showText('合伙人信息已提交，工作人员会尽快联系你，请保持电话畅通')
				
			},
		}
	}
</script>

<style lang="scss">
	.join-box {
		position: relative;
		height: 100vh;

		&>image {
			width: 100%;
			height: 100%;
		}

		.main-box {
			position: absolute;
			top: 500rpx;
			left: 50%;
			transform: translateX(-50%);

			.form-box {
				width: 690rpx;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				padding: 30rpx;
				box-sizing: border-box;


				&>text {
					color: #0F0F0F;
					font-size: 36rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.form-item {
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.10);
					padding: 20rpx 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					&>view {
						flex: 1;

						::v-deep .uni-input {
							color: #8C8A8A;
							font-size: 26rpx;
						}
					}

					&:last-child {
						border-bottom: 0;
					}

					&>text {
						width: 210rpx;
						color: #0F0D21;
						font-size: 28rpx;
					}

					::v-deep .uni-easyinput__content-input {
						height: 60rpx !important;
						padding-left: 0 !important;
					}
				}
			}

			.form-btn {
				margin-top: 48rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
				border-radius: 40rpx;
				color: #FFFFFF;
				opacity: 1;
			}
		}
	}
</style>
